<template>
  <Card title="非遗编辑">
    <Form :model="cuHeritageBO" :label-width="100" :rules="ruleValidate" style="width: 60vw" ref="formValidate">
      <FormItem label="标题:" style="width: 20vw" prop="cuHeritageTitle">
        <Input v-model="cuHeritageBO.cuHeritageTitle" placeholder="请输入标题"></Input>
      </FormItem>
      <FormItem label="标签:" style="width: 20vw" >
        <Select v-model="cuHeritageBO.cuHeritageCategoryId" >
          <Option v-for="item in cityList" :value="item.cuHeritageCategoryId" :key="item.cuHeritageCategoryId">{{ item.cuHeritageCategoryName }}</Option>
        </Select>
      </FormItem>
      <FormItem label="发布者:" style="width: 20vw" prop="cuHeritagePublisher">
        <Input v-model="cuHeritageBO.cuHeritagePublisher" placeholder="请输入发布者信息"></Input>
      </FormItem>
      <FormItem label="编辑内容"  style="width: 20vw;">
        <Select  v-model="type" >
          <Option v-for="item in cityListTwo" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </FormItem>
      <FormItem label="是否大图推荐:">
        <i-switch size="large" @on-change="change" v-model="switch1">
          <span slot="open">开启</span>
          <span slot="close">关闭</span>
        </i-switch>
      </FormItem>
      <FormItem label="添加封面:">
        <div class="demo-upload-list" v-if="hasImage">
          <img :src="imageUrl"/>
          <div class="demo-upload-list-cover">
            <Icon type="ios-eye-outline" @click.native="handleView(imageUrl)"></Icon>
            <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
          </div>
        </div>
        <Upload
          :action="actionUrl"
          :format="['jpg','jpeg','png']"
          :max-size="2048"
          :on-exceeded-size="handleMaxSize"
          :on-success="handleSuccess"
          :show-upload-list="false"
          style=" width:58px;">
          <Button icon="ios-cloud-upload-outline">上传图片</Button>
        </Upload>
      </FormItem>

      <FormItem label="推荐大图:">
        <div class="demo-upload-list" v-if="hasImage2">
          <img :src="imageUrl2"/>
          <div class="demo-upload-list-cover">
            <Icon type="ios-eye-outline" @click.native="handleView2(imageUrl2)"></Icon>
            <Icon type="ios-trash-outline" @click.native="handleRemove2()"></Icon>
          </div>
        </div>
        <Upload
          :action="actionUrl"
          :format="['jpg','jpeg','png']"
          :max-size="2048"
          :on-exceeded-size="handleMaxSize2"
          :on-success="handleSuccess2"
          :show-upload-list="false"
          style=" width:58px;">
          <Button icon="ios-cloud-upload-outline">上传图片</Button>
        </Upload>
      </FormItem>

      <FormItem label="上传视频:" v-show="type == 1" style="width: 20vw">
        <Upload
          :default-file-list="urlList"
          type="drag"
          :on-error="error"
          :on-success="viScuess"
          :action="actionUrl">
          <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>上传视频</p>
          </div>
        </Upload>

      </FormItem>
      <FormItem label="内容" v-show="type == 0">
        <editor  :cache="false" ref="editor" :value="cuHeritageBO.cuHeritageContent" @on-change="handleChange"/>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="save('formValidate')">保存</Button>
      </FormItem>
    </Form>
    <Modal title="图片预览" v-model="visible">
      <img :src="showImageUrl" v-if="visible" style="width: 100%"/>
    </Modal>
  </Card>
</template>

<script>
import Editor from '_c/editor/editor'

export default {
  name: 'heritage-add',
  components: { Editor },
  data () {
    return {
      imageUrl2: '',
      hasImage2: false,
      type: 1,
      urlList: [
        {
          name: '....',
          url: '....'
        }
      ],
      cityListTwo: [
        {
          value: 0,
          label: '文本内容'
        },
        {
          value: 1,
          label: '视频'
        }
      ],
      cityList: [

      ],
      switch1: true,
      cuVenuesId: null,
      visible: false,
      actionUrl: this.$all.baseUploadURL + '/me-minio/uploadImages',
      imageUrl: '',
      hasImage: false,
      cuVolunteersId: '',
      showImageUrl: '',
      cuHeritageId: null,
      cuHeritageBO: {
        cuHeritageRecommendedIs: 0,
        cuHeritageRecommendedUrl: '',
        cuHeritageId: null,
        cuHeritageTitle: '', // 标题
        cuHeritagePublisher: '', // 发布者信息
        cuHeritageImg: '', // 封面
        cuHeritageContent: '', // 内容
        cuHeritageCategoryId: 1,
        cuHeritageType: 1// 0文章 1视频
      },
      ruleValidate: {
        cuHeritageTitle: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
        cuHeritagePublisher: [
          { required: true, message: '发布者信息不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleMaxSize2 (file) {
      this.$Notice.warning({
        title: '图片大小限制',
        desc: '文件 ' + file.name + '太大,不能超过 2M.'
      })
    },
    handleSuccess2 (res, file) {
      this.imageUrl2 = res
      this.hasImage2 = true
      this.cuHeritageBO.cuHeritageRecommendedUrl = res
    },
    handleRemove2 () {
      this.imageUrl2 = ''
      this.hasImage2 = false
    },
    handleView2 (imageUrl) {
      this.showImageUrl = imageUrl
      this.visible = true
    },
    change () {
      this.cuHeritageBO.cuHeritageRecommendedIs = this.isBoolean(status)
    },
    isBoolean (boo) {
      if (boo) {
        return 0
      } else {
        return 1
      }
    },
    viScuess (response, file, fileList) {
      this.cuHeritageBO.cuHeritageContent = response
    },
    error (error, file, fileList) {

    },
    save (name) {
      this.cuHeritageBO.cuHeritageType = this.type
      let url = 'saveOne'
      if (this.cuHeritageId) {
        url = 'updateOne'
      }

      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$axios_supermall.post('/cu-heritage/' + url, this.cuHeritageBO).then(resp => {
            if (resp.data.code == 0) {
              this.$Message.success('处理成功')
              setTimeout(() => {
                this.$router.push({ path: '/heritage/heritage_list' })
              }, 1000)
            } else {
              this.$Message.error(resp.data.msg)
            }
          })
        } else {
          (valid)
        }
      })
    },
    handleChange (html, text) {
      this.cuHeritageBO.cuHeritageContent = html
    },
    handleRemove () {
      this.imageUrl = ''
      this.hasImage = false
    },
    handleView (imageUrl) {
      this.showImageUrl = imageUrl
      this.visible = true
    },
    handleSuccess (res, file) {
      this.imageUrl = res
      this.hasImage = true
      this.cuHeritageBO.cuHeritageImg = res
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '图片大小限制',
        desc: '文件 ' + file.name + '太大,不能超过 2M.'
      })
    },
    queryOne () {
      this.$axios_supermall.post('/cu-heritage/queryOne', this.cuHeritageId).then(resp => {
        if (resp.data.code == 0) {
          this.cuHeritageBO = resp.data.data
          this.imageUrl = this.cuHeritageBO.cuHeritageImg
          this.hasImage = true
          this.imageUrl2 = this.cuHeritageBO.cuHeritageRecommendedUrl
          this.hasImage2 = true
        }

        if (this.cuHeritageBO.cuHeritageType == 0) {
          this.type = 0
          this.$refs['editor'].setHtml(this.cuHeritageBO.cuHeritageContent)
        } else if (this.cuHeritageBO.cuHeritageType == 1) {
          this.type = 1
          this.urlList[0].url = this.cuHeritageBO.cuHeritageContent
          let subList = this.cuHeritageBO.cuHeritageContent.indexOf('?')
          this.urlList[0].name = this.cuHeritageBO.cuHeritageContent.substring(0, subList)
        }
      })
    },
    queryCat () {
      this.$axios_supermall.post('/cu-heritage-category/queryList').then(resp => {
        if (resp.data.code == 0) {
          this.cityList = resp.data.data
        }
      })
    }
  },
  mounted () {
    this.cuHeritageId = this.$route.params.id
    if (this.$route.params.id) {
      this.queryOne()
    }
    this.queryCat()
  }
}
</script>

<style scoped>
.demo-upload-list {
  display: inline-block;width: 500px;height: 300px;text-align: center;line-height: 60px;
  border: 1px solid transparent;border-radius: 4px;overflow: hidden;background: #fff;
  position: relative;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;height: 100%;
}
.demo-upload-list-cover {
  display: none;position: absolute;top: 0;bottom: 0;
  left: 0;right: 0;background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;font-size: 20px;cursor: pointer;margin: 0 2px;
}
</style>
